<!DOCTYPE html>
<%@page import="java.util.ArrayList"%>
<%@page import="mwa.cs.model.Reader"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="../admin/authority.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<%@ include file="headScriptHH.jsp"%>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>ประปา</title>

<script type="text/javascript"
	src="${pageContext.request.contextPath}/assets/js/hh/cs34000script.js"></script>
<!-- END JAVASCRIPT -->
<script>
	var vnZoneId = '${vnZoneId}';
</script>
</head>
<body>
<input type="hidden" id="url_address" name="url_address" value="">
<input type="hidden" id="agent_browser" name="agent_browser" value="">
	<div class="wrapper">
		<!-- BEGIN Top-Bar -->
		<%@ include file="../fragments/header.jsp"%>
		<!-- END Top-Bar -->

		<div id="detail-area" class="clearfix">
			<!-- BEGIN SIDEMENU -->
			<div class="hidden-xs hidden-sm page-sidebar" id="side-menu-bar">
				<ul class="page-sidebar-menu">					

					<!-- <div id="displaymenu"></div>  -->
					<%@ include file="../admin/menu.jsp" %>

				</ul>
			</div>
		<!-- End SIDEMENU-->
			
			
			<div class="col-sm-12 col-xs-12" id="right-side">
				<div id="navigator-bar">
					<i class="fa fa-home"></i> หน้าหลัก 
					<i class="fa fa-angle-right ml-5 mr-5"></i> แก้ไขข้อมูลการอ่านมาตร
				</div><!--End navigator-bar-->
				<div>
					<div id="page-header" class="clearfix">
						<div>แก้ไขข้อมูลการอ่านมาตร</div>
					</div>
					<div class="form-detail clearfix" style="margin-bottom:-80px">
						<form class="form-inline" role="form">
							<div style="text-align:right">
								<div class="form-group clearfix">
	   								<label  for="exampleInputEmail2"> ทะเบียนผู้ใช้น้ำ : </label>
	   								<input type="text" class="form-control" id="exampleInputEmail2" placeholder="ทะเบียนผู้ใช้น้ำ" onkeypress="return Enter(event);">
									<button type="button" class="btn btn-primary" onclick="searchAccount();"><i class="fa fa-search"></i> ค้นหาผู้ใช้น้ำ</button>
	 								</div>
	
							</div>
						</form>
					</div>
			<!-- End form-detail -->
			
					<div class="form-detail clearfix" style="margin-bottom:-40px">
						<div class="search-box no-radius ">
							<form class="form-horizontal" role="form">
								<div class="search-header no-radius" style="padding:3px 15px">
									<h4><i class="fa fa-list-alt"></i> แก้ไขข้อมูลการอ่านมาตร</h4>
								</div>
								<fieldset class="inner">
								<legend>รายละเอียดผู้ใช้น้ำ</legend>
									<div class="row">
										<div class="col-sm-6"><strong>เลขที่ใบแจ้งหนี้</strong> : <span id="billNumber"></span></div>
									</div>
									<div class="row mt-10">
										<div class="col-sm-5"><strong>เขต</strong> : <span id="zoneName"></span></div>
										<div class="col-sm-4"><strong>เส้นทาง</strong> : <span id="routeDescription"></span></div>
										<div class="col-sm-2"><strong>ลำดับ</strong> : <span id="sequence"></span></div>
									</div>
									<div class="row mt-10">
										<div class="col-sm-3"><strong>ทะเบียนผู้ใช้น้ำ</strong> : <span id="account"></span></div>
										<div class="col-sm-4"><strong>ชื่อ</strong> : <span id="fullName"></span></div>
										<div class="col-sm-5"><strong>ประเภทผู้ใช้น้ำ</strong> : <span id="customerClass"></span><input type="hidden" id="customerClassId" /></div>
									</div>
									<div class="row mt-10">
										<div class="col-sm-12"><strong>สถานที่ใช้น้ำ</strong> : <span id="address"></span></div>
									</div>
									<div class="row mt-10">
										<div class="col-sm-12"><strong><span id="allowance" style="color:red;"></span></strong></div>
									</div>
								</fieldset>
								<table  class="table-list">
									<tr>							
										<th width="20%" ></th>
										<th width="30%" >อ่านครั้งก่อน</th>
										<th width="30%" >อ่านครั้งปัจจุบัน</th>
										<th width="20%" ></th>							
									</tr>
									<tr>							
										<td style="text-align:right"><strong>วันที่อ่านน้ำ</strong></td>
										<td style="text-align:left" class="highlight-blue">
											<div class="input-group date">
												<input type='text' id='datetimepicker1' data-provide="datepicker" data-date-language="th-th" 
													class="form-control" placeholder="วันที่อ่านน้ำ" value="" />
												<span class="input-group-addon" id="spanDatetimepicker1"><span class="glyphicon glyphicon-calendar"></span></span>
											</div>
										</td>
										<td style="text-align:left" class="highlight-blue">
											<div class="input-group date">
												<input type='text' id='datetimepicker2' data-provide="datepicker" data-date-language="th-th"
													class="form-control" placeholder="วันที่อ่านน้ำ" value="" />
												<span class="input-group-addon" id="spanDatetimepicker2"><span class="glyphicon glyphicon-calendar"></span></span>
											</div> 
										</td>
										<td style="text-align:left"><input type="radio" name="typeCal" value="G" checked="checked"/> คิดแบบปกติ  <br /><input type="radio" name="typeCal" value="A" /> คิดแบบค่าเฉลี่ย
									</tr>
									<tr>							
										<td style="text-align:right"><strong>เลขในมาตร</strong></td>
										<td style="text-align:left" class="highlight-blue">
											<input type="text" class="form-control text-right" id="previousReadNumber" placeholder="" />
										</td>
										<td style="text-align:left" class="highlight-blue">
											<input type="text" class="form-control text-right" id="currentReadNumber" placeholder="" />
										</td>
										<td style="text-align:left"></td>							
									</tr>
								</table>
					 		</form>
					 	</div>
					</div>
					<div class="form-detail clearfix" style="margin-top:-60px" >
						<button type="button" class="btn btn-success" onclick="calConsumption();">คำนวน</button>
						<table  class="table-list">
							<tr>
								<th width="10%">หน่วยที่ใช้</th>
								<th width="13%">ค่าน้ำ</th>
								<th width="10%">ค่าบริการ</th>
								<th width="10%">ภาษี</th>
								<th width="13%">รวมค่าน้ำ</th>
								<th width="10%">ค่าเก็บขยะ</th>
								<th width="10%">ค่าบำบัดน้ำเสีย</th>
								<th width="10%">ค่าอื่นๆ</th>
								<th width="14%">รวมทั้งหมด</th>
							</tr>
							<tr class="odd">
								<td><input type="text" class="form-control text-right" id="consumption" placeholder="" value="0"></td>
								<td><input type="text" class="form-control text-right" id="waterCharge" placeholder="" value="0.00"></td>
								<td><input type="text" class="form-control text-right" id="waterFee" placeholder="" value="0.00"></td>
								<td><input type="text" class="form-control text-right" id="vatAmount" placeholder="" value="0.00"></td>
								<td class="highlight-blue"><input type="text" disabled class="form-control text-right" id="billAmount" placeholder="" value="0.00"></td>
								<td><input type="text" class="form-control text-right" id="garbageCharge" placeholder="" value="0.00"></td>
								<td><input type="text" class="form-control text-right" id="wasteWaterCharge" placeholder="" value="0.00"></td>
								<td><input type="text" class="form-control text-right" id="otherCharge" placeholder="" value="0.00"></td>
								<td class="highlight-blue"><input type="text" class="form-control text-right" id="totalAmount" placeholder="" value="0.00"></td>
							</tr>
							<tr class="odd">
								<th colspan="5" style="text-align:right; background-color:#f4f4f4; color:#333" valign="top"><strong>หมายเหตุจากการอ่านน้ำ</strong> :</th>
								<td colspan="4">
									<select class="form-control" id="InputComment" name="comment_code">
									</select>
								</td>
							</tr>
						</table>
						<hr />
						<div class="text-center mt-30">
							  <button type="button" class="btn btn-primary" onclick="confirm();"><i class="fa fa-floppy-o"></i> บันทึก</button>
							  <button type="button" class="btn btn-primary" onclick="refresh();"><i class="fa fa-refresh"></i> เริ่มใหม่</button>
<!-- 							  <button type="submit" class="btn btn-primary"><i class="fa fa-times"></i> ยกเลิก</button> -->
						</div>
					</div>
				</div>
			<!-- End detail-area -->
				<div id="footer-detail">Copyright © สงวนลิขสิทธิ์ พ.ศ.2557 โดย การประปานครหลวง</div>
			</div>
		</div>
		<!-- Dialog Show เมื่อผู้ใช้งานไม่กรอกข้อมูลทะเบียนผู้ใช้น้ำ -->
		<div class="modal fade" id="failAccountModal" tabindex="-1"
			role="dialog" aria-labelledby="failModal" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">ตรวจสอบข้อมูลให้ถูกต้อง</h4>
					</div>
					<div class="modal-body">
						<div id="modal_content"><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>กรุณากรอกข้อมูลทะเบียนผู้ใช้น้ำ</div>
					</div>
					<div class="modal-footer" style="text-align: center;">

						<button type="button" class="btn btn-primary"
							 onclick="getFocus();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
					</div>
				</div>
			</div>
		</div>
		<!-- Dialog Show เมื่อค้นหาไม่พบข้อมูลทะเบียนผู้ใช้น้ำ ที่ต้องการจะแก้ไข -->
		<div class="modal fade" id="failResultModal" tabindex="-1"
			role="dialog" aria-labelledby="failModal" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">ผลการค้นหาข้อมูล</h4>
					</div>
					<div class="modal-body">
						<div id="modal_content"><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span><span id="messageBoxSearch"></span></div>
					</div>
					<div class="modal-footer" style="text-align: center;">

						<button type="button" class="btn btn-primary" onclick="getFocus();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Dialog Show เมื่อไม่พบข้อมูลทะเบียนผู้ใช้น้ำ ที่ต้องการจะแก้ไข -->
		<div class="modal fade" id="checkResultModal" tabindex="-1"
			role="dialog" aria-labelledby="failModal" aria-hidden="true">
			<div class="modal-dialog" style="width: 570px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">เกิดข้อผิดพลาด</h4>
					</div>
					<div class="modal-body">
						<div id="modal_content"><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>ไม่สามารถแก้ไขข้อมูลทะเบียนผู้ใช้น้ำได้ เนื่องจากไม่พบข้อมูลทะเบียนผู้ใช้น้ำ</div>
					</div>
					<div class="modal-footer" style="text-align: center;">

						<button type="button" class="btn btn-primary"
							 onclick="getFocus2();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
					</div>
				</div>
			</div>
		</div>
		<!-- Dialog Show เมื่อผู้ใช้งานต้องการบันทึกการแก้ไขทะเบียนผู้ใช้น้ำ -->
		<div class="modal fade" id="confirmEditModal" tabindex="-1"
			role="dialog" aria-labelledby="failModal" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">ยืนยันการแก้ไขข้อมูล</h4>
					</div>
					<div class="modal-body">
						<div id="modal_content" ><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>คุณต้องการแก้ไขข้อมูลการอ่านมาตรหรือไม่</div>
					</div>
					<div class="modal-footer" style="text-align: center;">
						<button type="button" class="btn btn-primary" onclick="save();"><i class="fa fa-floppy-o"></i> ตกลง</button>
						<button type="button" class="btn btn-danger" onclick="cancel();"><i class="glyphicon glyphicon-floppy-remove"></i> ยกเลิก</button>
					</div>
				</div>
			</div>
		</div>
		<!-- Dialog Show เมื่อผู้ใช้งานแก้ไขข้อมูลสำเร็จ -->
		<div class="modal fade" id="successModal" tabindex="-1"
			role="dialog" aria-labelledby="failModal" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">แก้ไขข้อมูลสำเร็จ</h4>
					</div>
					<div class="modal-body">
						<div id="modal_content"><span class="fa-stack fa-lg mr-10" style="color:#0C0"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-check fa-stack-1x fa-inverse"></i> </span>แก้ไขข้อมูลการอ่านมาตรสำเร็จ</div>
					</div>
					<div class="modal-footer" style="text-align: center;">
						<button type="button" class="btn btn-primary" onclick="getFocus2();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
					</div>
				</div>
			</div>
		</div>
		<!-- Dialog Show เมื่อผู้ใช้งานแก้ไขข้อมูลเกิดข้อผิดพลาด -->
		<div class="modal fade" id="failModal" tabindex="-1"
			role="dialog" aria-labelledby="failModal" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title">เกิดข้อผิดพลาด</h4>
					</div>
					<div class="modal-body">
						<div id="modal_content"><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>แก้ไขข้อมูลการอ่านมาตรเกิดข้อผิดพลาด</div>
					</div>
					<div class="modal-footer" style="text-align: center;">
						<button type="button" class="btn btn-primary" onclick="cancel();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- End Wrapper -->
</body>
</html>